<template>
  <div class="zs-table-page-container" v-loading="loading">
    <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
      <span>
        <el-select v-model="formData.biProjectCode" filterable class="zs-select-md zs-space-right-sm" placeholder="项目"
          @change="changeProject()">
          <el-option v-for="item in projectList" :key="item.biProjectCode" :label="item.projectName"
            :value="item.biProjectCode" />
        </el-select>
        <el-date-picker class="zs-space-right-sm" v-model="selectDataTime" :type="pickerDate" placeholder="日期"
          :clearable="false" :value-format="valueFormat" @change="getBrandList()" />
        <el-select v-model="formData.brandname" filterable multiple collapse-tags collapse-tags-tooltip
          class="zs-select-md zs-space-right-sm" placeholder="品牌">
          <el-option v-for="(item, index) in brandList" :key="index" :label="item" :value="item" />
        </el-select>
        <el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
          <template #reference>
            <el-button class="zs-btn-square-solid"
              :class="{ 'zs-btn-square-solid-active': formData.floorname.length > 0 || (formData.saleMonitor.length > 0 && curTab == '日') || formData.renttypedesc.length > 0 || formData.cashtype.length > 0 || formData.firstTraderelationName.length > 0 || formData.twoTraderelationName.length > 0 || formData.threeTraderelationName.length > 0 || formData.bizSpecType != 0 }">
              <el-icon>
                <MoreFilled />
              </el-icon>
            </el-button>
          </template>
          <template #default>
            <el-select v-model="formData.floorname" multiple collapse-tags collapse-tags-tooltip :teleported="false"
              class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="楼层" clearable>
              <el-option v-for="(item, index) in floorList" :key="index" :label="item" :value="item" />
            </el-select>
            <el-select v-model="formData.saleMonitor" multiple collapse-tags collapse-tags-tooltip :teleported="false"
              class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="销售监控" v-if="curTab == '日'" clearable>
              <el-option v-for="(item, index) in saleMonitorList" :key="index" :label="item" :value="item" />
            </el-select>
            <el-select v-model="formData.renttypedesc" multiple collapse-tags collapse-tags-tooltip :teleported="false"
              class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="租金架构" clearable>
              <el-option v-for="(item, index) in renttypedescList" :key="index" :label="item" :value="item" />
            </el-select>
            <el-select v-model="formData.cashtype" multiple collapse-tags collapse-tags-tooltip :teleported="false"
              class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="销售设备" clearable>
              <el-option v-for="(item, index) in cashtypeList" :key="index" :label="item" :value="item" />
            </el-select>
            <el-select v-model="formData.firstTraderelationName" filterable multiple collapse-tags collapse-tags-tooltip
              :teleported="false" class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="一级业态" clearable>
              <el-option v-for="(item, index) in oneLevelList" :key="index" :label="item.dicName"
                :value="item.dicValue" />
            </el-select>
            <el-select v-model="formData.twoTraderelationName" filterable multiple collapse-tags collapse-tags-tooltip
              :teleported="false" class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="二级业态" clearable>
              <el-option v-for="(item, index) in twoLevelList" :key="index" :label="item.dicName"
                :value="item.dicValue" />
            </el-select>
            <el-select v-model="formData.threeTraderelationName" filterable multiple collapse-tags collapse-tags-tooltip
              :teleported="false" class="zs-select-md zs-space-right-sm zs-space-bottom-sm" placeholder="三级业态" clearable>
              <el-option v-for="(item, index) in threeLevelList" :key="index" :label="item.dicName"
                :value="item.dicValue" />
            </el-select>
            <el-select v-model="formData.bizSpecType" class="zs-select-md zs-space-right-sm zs-space-bottom-sm"
              placeholder="是否含汽车+苹果" :teleported="false">
              <el-option v-for="(item, index) in bizSpecTypeList" :key="index" :label="item.name" :value="item.value" />
            </el-select>
          </template>
        </el-popover>
        <el-button class="zs-btn-plain" @click="getData()">
          查询
        </el-button>
      </span>
      <span class="zs-layout-flex-row" v-if="isShowTabs">
        <div class="db-btn zs-space-right-sm" :class="{ 'db-btn-primary': curTab == '日' }" @click="changeTab('日')">
          按日
        </div>
        <div class="db-btn zs-space-right-sm" :class="{ 'db-btn-primary': curTab == '月' }" @click="changeTab('月')">
          按月
        </div>
        <div class="db-btn zs-space-right" :class="{ 'db-btn-primary': curTab == '年' }" @click="changeTab('年')">按年
        </div>
        <el-button class="zs-btn-plain" @click="handleDownload">
          <el-icon class="el-icon--left">
            <Upload />
          </el-icon>导出
        </el-button>
      </span>
    </div>
    <div class="zs-card zs-table-page-content">
      <el-table :data="tableData" class="zs-table-page-main" :stripe="stripe" :cell-class-name="cellClass"
        @cell-click="cellClick" v-if="curTab == '日'">
        <el-table-column label="序号" width="60" :align="'center'">
          <template #default="scope">
            {{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="floorname" label="楼层" width="100" :align="'left'"></el-table-column>
        <el-table-column prop="brandname" label="品牌名称" min-width="120" :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column class-name="db-table-cell-border-right" prop="useArea" label="租赁面积" width="100"
          :align="'right'"></el-table-column>
        <el-table-column label="销售额" :align="'right'" width="100">
          <template #default="scope">
            <el-tooltip effect="dark" :content="toThousands(scope.row.yearmonthSalesYuan)" placement="top">
              <span>{{ toThousands(scope.row.yearmonthSales) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="weekHb" label="环比上周" width="100" :align="'right'"></el-table-column>
        <el-table-column class-name="db-table-cell-border-right" label="销售监控" :align="'center'" width="100">
          <template #header>
            <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-center">
              <div>销售监控</div>
              <el-popover placement="bottom" :width="300" trigger="hover">
                <template #reference>
                  <i class="icon-i zs-text-gray zs-space-left-min"></i>
                </template>
                <div>当日销售/上月日均销售-1>50%: 超高</div>
                <div>当日销售/上月日均销售-1&lt;-50%: 超低</div>
              </el-popover>
            </div>
          </template>
          <template #default="scope">
            <span :class="{ 'zs-text-red': scope.row.constartdate == '1' }">{{ scope.row.overprotectionSale }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="overprotectionProportion" label="租金架构" width="120" :align="'right'"></el-table-column>
        <el-table-column class-name="db-table-cell-border-right" prop="pcent" label="销售设备" width="120"
          :align="'center'"></el-table-column>
        <el-table-column prop="passengerFlowEqu" label="客流设备" width="120" :align="'center'"></el-table-column>
        <el-table-column class-name="db-table-cell-border-right" label="客流量" :align="'right'" width="100">
          <template #default="scope">
            {{ toThousands(scope.row.guaranteedSales) }}
          </template>
        </el-table-column>
        <el-table-column prop="gatenumber" label="铺位编号" min-width="120" :align="'left'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="contractscode" label="合同编码" width="120" :align="'center'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="monthFlatEffect" label="合同开始" min-width="120" :align="'center'"></el-table-column>
        <el-table-column class-name="db-table-cell-border-right" prop="invrecamtl" label="合同结束" min-width="120"
          :align="'center'"></el-table-column>
        <el-table-column prop="monthPriceToRent" label="一级业态" min-width="120" :align="'left'"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="renttypedesc" label="二级业态" min-width="120" :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="cashtype" label="三级业态" min-width="200" :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>
      </el-table>
      <el-table :data="tableData" class="zs-table-page-main" :stripe="stripe" :cell-class-name="cellClass"
        @cell-click="cellClick" v-if="curTab == '月'">
        <el-table-column label="序号" width="60" :align="'center'">
          <template #default="scope">
            {{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="floorname" label="楼层" width="100" :align="'left'"></el-table-column>
        <el-table-column prop="brandname" label="品牌名称" min-width="200" :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column class-name="db-table-cell-border-right" prop="useArea" label="租赁面积" width="100"
          :align="'right'"></el-table-column>
        <el-table-column label="销售额" :align="'right'" width="100">
          <template #default="scope">
            <el-tooltip effect="dark" :content="toThousands(scope.row.yearmonthSalesYuan)" placement="top">
              <span>{{ toThousands(scope.row.yearmonthSales) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="avgMonthDaysales" label="日均销售" width="120" :align="'right'"></el-table-column>
        <el-table-column class-name="db-table-cell-border-right" prop="yearTb" label="同比上年" width="120"
          :align="'right'"></el-table-column>
        <el-table-column prop="monthFlatEffect" label="月坪效" width="120" :align="'right'">
          <template #header>
            <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
              <div>月坪效</div>
              <el-popover placement="bottom" :width="320" trigger="hover" content="（销售额/经营天数*30）/月末起租面积">
                <template #reference>
                  <i class="icon-i zs-text-gray zs-space-left-min"></i>
                </template>
              </el-popover>
            </div>
          </template>
          <template #default="scope">
            {{ toThousands(scope.row.monthFlatEffect) }}
          </template>
        </el-table-column>
        <el-table-column label="租费" :align="'right'" width="120">
          <template #default="scope">
            <el-tooltip effect="dark" :content="toThousands(scope.row.invrecamtlYuan)" placement="top">
              <span>{{ toThousands(scope.row.invrecamtl) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column class-name="db-table-cell-border-right" label="租售比" :align="'right'" width="120">
          <template #header>
            <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
              <div>租售比</div>
              <el-popover placement="bottom" :width="80" trigger="hover" content="月租费/销售额">
                <template #reference>
                  <i class="icon-i zs-text-gray zs-space-left-min"></i>
                </template>
              </el-popover>
            </div>
          </template>
          <template #default="scope">
            {{ scope.row.monthPriceToRent == '-' ? '-' : `${scope.row.monthPriceToRent}%` }}
          </template>
        </el-table-column>
        <el-table-column prop="renttypedesc" label="租金架构" width="120" :align="'right'"></el-table-column>
        <el-table-column prop="cashtype" label="销售设备" width="120" :align="'center'"></el-table-column>
        <el-table-column label="超保销售额" :align="'right'" width="120">
          <template #header>
            <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
              <div>超保销售额</div>
              <el-popover placement="bottom" :width="100" trigger="hover" content="销售额-保底销售额">
                <template #reference>
                  <i class="icon-i zs-text-gray zs-space-left-min"></i>
                </template>
              </el-popover>
            </div>
          </template>
          <template #default="scope">
            <span :class="{ 'zs-text-red': scope.row.overprotectionColorLab == '1' }">{{
              toThousands(scope.row.overprotectionSale) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="超保比例" :align="'right'" width="120">
          <template #header>
            <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
              <div>超保比例</div>
              <el-popover placement="bottom" :width="300" trigger="hover" content="（销售额-保底销售额）/保底销售额">
                <template #reference>
                  <i class="icon-i zs-text-gray zs-space-left-min"></i>
                </template>
              </el-popover>
            </div>
          </template>
          <template #default="scope">
            {{ scope.row.overprotectionProportion == '-' ? '-' : `${scope.row.overprotectionProportion}%` }}
          </template>
        </el-table-column>
        <el-table-column class-name="db-table-cell-border-right" label="扣点" :align="'right'" width="120">
          <template #default="scope">
            {{ scope.row.pcent == '-' ? '-' : `${scope.row.pcent}%` }}
          </template>
        </el-table-column>
        <el-table-column prop="passengerFlowEqu" label="客流设备" width="120" :align="'center'"></el-table-column>
        <el-table-column class-name="db-table-cell-border-right" label="客流量" :align="'right'" width="120">
          <template #default="scope">
            {{ toThousands(scope.row.yearmonthFlow) }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="保底销售" :align="'right'" width="120" >
                <template #header>
                  <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                    <div>保底销售</div>
                    <el-popover placement="bottom" :width="100" trigger="hover" content="月租金/扣点">
                      <template #reference>
                        <i class="icon-i zs-text-gray zs-space-left-min"></i>
                      </template>
                    </el-popover>
                  </div>
                </template>
                <template #default="scope">
                  {{ toThousands(scope.row.guaranteedSales) }}
                </template>
              </el-table-column> -->
        <el-table-column prop="gatenumber" label="铺位编号" min-width="120" :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="contractscode" label="合同编码" width="120" :align="'center'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="constartdate" label="合同开始" min-width="120" :align="'center'"></el-table-column>
        <el-table-column class-name="db-table-cell-border-right" prop="conenddate" label="合同结束" min-width="120"
          :align="'center'"></el-table-column>
        <el-table-column prop="firstFormat" label="一级业态" min-width="120" :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="shopTraderelationname" label="二级业态" min-width="120" :align="'left'"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column class-name="db-table-cell-border-right" prop="shopTradergb" label="三级业态" min-width="200"
          :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="monthJyAmount" label="营业时间" :align="'center'"></el-table-column>
      </el-table>
      <el-table :data="tableData" class="zs-table-page-main" :stripe="stripe" :cell-class-name="cellClass"
        @cell-click="cellClick" v-if="curTab == '年'">
        <el-table-column label="序号" width="60" :align="'center'">
          <template #default="scope">
            {{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="floorname" label="楼层" :align="'left'"></el-table-column>
        <el-table-column prop="brandname" label="品牌名称" :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column class-name="db-table-cell-border-right" prop="useArea" label="租赁面积" width="120"
          :align="'right'"></el-table-column>
        <el-table-column label="销售额" :align="'right'" width="120">
          <template #default="scope">
            <el-tooltip effect="dark" :content="toThousands(scope.row.yearmonthSalesYuan)" placement="top">
              <span>{{ toThousands(scope.row.yearmonthSales) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="月均销售" :align="'right'" width="120">
          <template #header>
            <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
              <div>月均销售</div>
              <el-popover placement="bottom" :width="200" trigger="hover" content="	（销售额/经营天数）*30">
                <template #reference>
                  <i class="icon-i zs-text-gray zs-space-left-min"></i>
                </template>
              </el-popover>
            </div>
          </template>
          <template #default="scope">
            {{ toThousands(scope.row.guaranteedSales) }}
          </template>
        </el-table-column>
        <el-table-column class-name="db-table-cell-border-right" prop="yearTb" label="同比上年" width="120"
          :align="'right'"></el-table-column>
        <el-table-column label="月均坪效" :align="'right'" width="120">
          <template #header>
            <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
              <div>月均坪效</div>
              <el-popover placement="bottom" :width="320" trigger="hover" content="	（销售额/经营天数*30）/年末起租面积">
                <template #reference>
                  <i class="icon-i zs-text-gray zs-space-left-min"></i>
                </template>
              </el-popover>
            </div>
          </template>
          <template #default="scope">
            {{ toThousands(scope.row.overprotectionSale) }}
          </template>
        </el-table-column>
        <el-table-column prop="pcent" label="租费" width="120" :align="'right'">
          <template #header>
            <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
              <div>租费</div>
              <el-popover placement="bottom" :width="200" trigger="hover" content="	（年租费/经营天数）*30">
                <template #reference>
                  <i class="icon-i zs-text-gray zs-space-left-min"></i>
                </template>
              </el-popover>
            </div>
          </template>
          <template #default="scope">
            <el-tooltip effect="dark" :content="toThousands(scope.row.invrecamtlYuan)" placement="top">
              <span>{{ toThousands(scope.row.pcent) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column class-name="db-table-cell-border-right" prop="monthFlatEffect" label="租售比" width="120"
          :align="'right'">
          <template #header>
            <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
              <div>租售比</div>
              <el-popover placement="bottom" :width="100" trigger="hover" content="月均租费/月均销售">
                <template #reference>
                  <i class="icon-i zs-text-gray zs-space-left-min"></i>
                </template>
              </el-popover>
            </div>
          </template>
          <template #default="scope">
            {{ scope.row.monthFlatEffect == '-' ? '-' : `${scope.row.monthFlatEffect}%` }}
          </template>
        </el-table-column>

        <!-- <el-table-column prop="overprotectionProportion" label="年租费" width="120"  :align="'right'"></el-table-column> -->

        <el-table-column prop="invrecamtl" label="租金架构" width="120" :align="'right'"></el-table-column>
        <el-table-column class-name="db-table-cell-border-right" prop="monthPriceToRent" label="销售设备" width="120"
          :align="'center'"></el-table-column>

        <el-table-column prop="passengerFlowEqu" label="客流设备" width="120" :align="'center'"></el-table-column>
        <el-table-column class-name="db-table-cell-border-right" label="客流量" :align="'right'" width="120">
          <template #default="scope">
            {{ toThousands(scope.row.shopTradergb) }}
          </template>
        </el-table-column>

        <el-table-column prop="gatenumber" label="铺位编号" min-width="120" :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="contractscode" label="合同编码" width="120" :align="'center'"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="renttypedesc" label="合同开始" min-width="120" :align="'center'"></el-table-column>
        <el-table-column class-name="db-table-cell-border-right" prop="cashtype" label="合同结束" min-width="120"
          :align="'center'"></el-table-column>

        <el-table-column prop="constartdate" label="一级业态" min-width="120" :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="conenddate" label="二级业态" min-width="120" :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column class-name="db-table-cell-border-right" prop="firstFormat" label="三级业态" min-width="200"
          :align="'left'" :show-overflow-tooltip="true">
        </el-table-column>

        <el-table-column prop="shopTraderelationname" label="营业时间" width="120" :align="'center'"></el-table-column>
      </el-table>
      <div class="zs-text-gray-dark zs-text-sm zs-space-top" v-if="curTab == '日'">*销售额：万元；客流量：人次</div>
      <div class="zs-text-gray-dark zs-text-sm zs-space-top" v-if="curTab == '月'">*销售额，保底销售，超保销售，月租费：万元；月坪效：元/㎡/月；客流量：人次
      </div>
      <div class="zs-text-gray-dark zs-text-sm zs-space-top" v-if="curTab == '年'">*销售额，月均销售，年租费，月均租费：万元；月均坪效：元/㎡/月；客流量：人次
      </div>
      <div class="zs-space-top-sm zs-table-page-pagination">
        <el-pagination v-model:currentPage="currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes"
          :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>
<script setup>
import dbPublicApi from '@/api/dbPublic'
import digitalMonthlyReportApi from '@/api/Manage/Business/digitalMonthlyReport';
import detailApi from '@/api/Manage/Business/detailPages'
import { toThousands, dateFormat } from '@/utils/number-util'
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { downloadNewFile } from "@/utils/publicUtils";
const router = useRouter()
let store = useStore()
const stripe = ref(true)
const route = useRoute().query

let loading = ref(false)

let biProjectCode = ref(route.biProjectCode)
const isShowTabs = ref(false)
const isCanClickBrand = ref(false)
const updateDate = ref('')
const tabPermi = route.tabPermi
const dataTime = route.dataTime
const selectDataTime = ref('')
let curTab = ref(route.curTab)
let valueFormat = ref('YYYY-MM-DD')
let pickerDate = ref('date')
let formData = reactive({
  biProjectCode: biProjectCode,
  brandname: [],
  floorname: [],
  saleMonitor: [],
  renttypedesc: [],
  cashtype: [],
  firstTraderelationName: [],
  twoTraderelationName: [],
  threeTraderelationName: [],
  bizSpecType: 0
})
let saleMonitorList = ref(['超高', '超低', '正常']) // 销售监控列表
let renttypedescList = ref(['固定租金', '两者取高', '提成租金']) // 租金架构列表
let cashtypeList = ref(['独立收银', 'POS机', '采集器']) // 销售设备列表
let oneLevelList = ref([]) // 一级业态列表
let twoLevelList = ref([]) // 二级业态列表
let threeLevelList = ref([]) // 三级业态列表
let bizSpecTypeList = ref([{ value: 0, name: '全部' }, { value: 1, name: '不含汽车' }, { value: 2, name: '不含苹果' }, { value: 3, name: '不含汽车+苹果' }])
let brandList = ref([]) // 品牌列表
let floorList = ref([]) // 楼层列表
let projectList = ref([]) // 项目列表
// 获取项目列表
const getPorjectList = async () => {
  await dbPublicApi.queryProjectListsApi(tabPermi).then((res) => {
    if (res.data.code == 200) {
      updateDate.value = res.data.data.dataTime
      projectList.value = res.data.data.projects
    }
  })
}
// 获取品牌列表
const getBrandList = async () => {
  // 改变项目 || 改变日期组件 || 改变tab，重新获取品牌下拉选，并清空品牌
  formData.brandname = []
  await detailApi.wholeBrandDownApi({ biProjectCode: formData.biProjectCode, dataTime: selectDataTime.value, timeType: curTab.value }).then((res) => {
    if (res.data.code == 200) {
      brandList.value = res.data.data
    }
  })
}
// 获取楼层列表
const getFloorList = async () => {
  formData.floorname = []
  await detailApi.wholeBrandFloorDownApi({ biProjectCode: formData.biProjectCode }).then((res) => {
    if (res.data.code == 200) {
      floorList.value = res.data.data
    }
  })
}
// 获取一级业态列表
const getOneLevelDownList = async () => {
  await detailApi.wholeBrandOneLevelDownApi().then((res) => {
    if (res.data.code == 200) {
      oneLevelList.value = res.data.data
    }
  })
}
// 获取二级业态列表
const getTwoLevelDownList = async () => {
  await detailApi.wholeBrandTwoLevelDownApi().then((res) => {
    if (res.data.code == 200) {
      twoLevelList.value = res.data.data
    }
  })
}
// 获取三级业态列表
const getThreeLevelDownList = async () => {
  await detailApi.wholeBrandThreeLevelDownApi().then((res) => {
    if (res.data.code == 200) {
      threeLevelList.value = res.data.data
    }
  })
}

// 改变日期组件，重新获取品牌下拉选，并清空品牌
const changeProject = () => {
  getBrandList()
  getFloorList()
}

const changeTab = (value) => {
  formData.brandname = []
  curTab.value = value
  tableData.value = []
  init(1)
  getBrandList()
}

const cellClass = ({ column }) => {
  // 【品牌名称】列 样式
  if (column.property == 'brandname' && isCanClickBrand.value) {
    return 'zs-link'
  }
}

const cellClick = (row, column) => {
  // 【品牌名称】列 事件
  if (column.property == 'brandname' && isCanClickBrand.value) {
    goDetail(row)
  }
}

// 分页
const curPageSizes = ref(store.state.uiPageSizes)
let curPageSize = ref(store.state.uiPageSizeDefault)
let currentPage = ref(1)
const total = ref(0)
const handleSizeChange = (val) => {
  curPageSize.value = val
  getList()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getList()
}

const tableData = ref([])
const getList = () => {
  tableData.value = []
  digitalMonthlyReportApi.digitalWholeBrandListApi({
    type: curTab.value == '日' ? '0' : curTab.value == '月' ? '1' : '2',
    dataTime: selectDataTime.value,
    pageNo: currentPage.value,
    pageSize: curPageSize.value,
    ...formData
  }).then((res) => {
    if (res.data.code == 200) {
      tableData.value = res.data.data.childList
      total.value = res.data.data.totalCount
      loading.value = false
    }
  })
}
const getData = () => {
  currentPage.value = 1
  loading.value = true
  getList()
}
// type = 1 是切换按日按年按月  不需要重新获取下拉选
const init = async (type) => {
  if (!type) {
    await getPorjectList()
  }
  if (curTab.value == '日') {
    if (route.curTab == '年' || route.curTab == '月') {
      selectDataTime.value = updateDate.value
    } else {
      selectDataTime.value = dataTime
    }
    valueFormat.value = 'YYYY-MM-DD'
    pickerDate.value = 'date'
  }
  if (curTab.value == '月') {

    if (route.curTab == '年') {
      let currentDate = new Date(updateDate.value);
      selectDataTime.value = dateFormat(currentDate, 'YYYY-MM')
    } else {
      let currentDate = new Date(dataTime);
      selectDataTime.value = dateFormat(currentDate, 'YYYY-MM')
    }

    // 按月改为默认展示上个月的数据
    // if (route.curTab == '年') {
    //   let currentDate = new Date(updateDate);
    //   currentDate.setMonth(currentDate.getMonth() - 1);
    //   selectDataTime.value = dateFormat(currentDate, 'YYYY-MM')
    // } else {
    //   let currentDate = new Date(dataTime);
    //   currentDate.setMonth(currentDate.getMonth() - 1);
    //   selectDataTime.value = dateFormat(currentDate, 'YYYY-MM')
    // }

    valueFormat.value = 'YYYY-MM'
    pickerDate.value = 'month'
  }
  if (curTab.value == '年') {
    selectDataTime.value = new Date(dataTime).getFullYear().toString()
    valueFormat.value = 'YYYY'
    pickerDate.value = 'year'
  }
  if (!type) {
    getBrandList()
    getFloorList()
    getOneLevelDownList()
    getTwoLevelDownList()
    getThreeLevelDownList()
  }
  getData()
}
init()
const goDetail = (row) => {
  console.log(row)
  // selectDataTime  当前选择的时间。
  router.push({
    path: '/page/routeController/index',
    query: {
      rid: 'Manage/Business/salesVolume/brandList',
      rTitle: '品牌列表',
      biProjectCode: formData.biProjectCode,
      brandname: row.brandname, // 品牌名称
      // contractscode: row.contractscode, // 合同编码
      updateDate: updateDate.value, // 数据更新日期
      tabPermi: tabPermi, // 权限标识
      curTab: curTab.value, // 日月年
      curTime: selectDataTime.value // 当前选择的时间
    },
  })
}
const handleDownload = async () => {
  const fileName = `整场品牌${curTab.value}列表.xls`
  let fileData
  await detailApi.wholeBrandExportApi(
    {
      type: curTab.value == '日' ? '0' : curTab.value == '月' ? '1' : '2',
      dataTime: selectDataTime.value,
      ...formData
    }
  ).then(res => {
    fileData = res.data
  })
  downloadNewFile(fileData, fileName)
}

</script>


<style scoped lang="scss"></style>
